<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=5.0" charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
  <title>开始使用Layui</title>
  <link rel="stylesheet" type="text/css" href="css/swiper.css" />
  <link rel="stylesheet" href="build/css/layui.css">
  <link type="text/css" rel="stylesheet" href="css/brands.css" />
  
  <script type="text/javascript" src="js/swiper.js"></script>
  <script type="text/javascript" src="js/reset_font.js"></script>
</head>
<body>
	<div class="top">
			<a href="../classes.html" class="return"></a>
			<span>品牌推荐</span>
		</div>
		<div class="myswiper">
			<!--轮播图-->
			<div class="swiper-container">
				<div class="swiper-wrapper">
				    <div class="swiper-slide"><a href="#"><img src="images/brand2/001.png"/></a></div>
				    <div class="swiper-slide"><a href="#"><img src="images/brand2/002.png"/></a></div>
				    <div class="swiper-slide"><a href="#"><img src="images/brand2/003.png"/></a></div>
				</div>
		        <!-- Add Pagination -->
		        <!--<div class="swiper-pagination"></div>-->
		  			<div class="swiper-scrollbar"></div>
		  	<!--js部分-->		
			<script type="text/javascript">
			var myswiper = new Swiper('.swiper-container', {
				autoplay : 2000,
//		    	scrollbar:'.swiper-scrollbar',
//		    	autoplayDisableOnInteraction : false,
				pagination: '.swiper-pagination',
				paginationClickable: true
				});
			</script>
			<!--js部分 结束-->
		 	</div>
	    	<!--/轮播图-->
		</div>
		<div style="width: 100%;height: 3rem;border:1px solid red;box-sizing: border-box;">
			<img src="images/brand2/003.png" width="100%"/>
			<span style="color:white;display:inline-block;position:absolute;width:100%;height: 1rem;margin-top:-2rem;border:1px solid red;text-align: center;" >这里是文字</span>
		</div>
		<div style="width: 100%;height: 3rem;border:1px solid red;box-sizing: border-box;">
			<img src="images/brand2/003.png" width="100%"/>
			<span style="color:white;display:inline-block;position:absolute;width:100%;height: 1rem;margin-top:-2rem;border:1px solid red;;" >这里是文字</span>
		</div>
 <div id="demo" class="main"></div>
<!-- 你的HTML代码 -->
 
<script src="build/layui.js"></script>
<script>
//<!--一般直接写在一个js文件中-->
layui.use('flow', function(){
  var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
  var flow = layui.flow;
  flow.load({
    elem: '#demo' //指定列表容器
    ,isAuto:true//true为自动加载， 为false时，需要点击加载更多按钮来加载新数据
//  ,end:"hello"//默认为没有更多了
//		,mb:100//与底部的临界距离，默认50
    ,islazyimg:true
    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
    	
//    var lis = [];
      //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
//    $.get('/api/list?page='+page, function(res){
//      //假设你的列表返回在data集合中
//      layui.each(res.data, function(index, item){
//        lis.push('<li style="border:1px solid red;width:100px;height:2rem">'+ item.title +'</li>');
//      }); 
        
        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
//      next(lis.join(''), page < res.pages);    
					//模拟数据插入
		      setTimeout(function(){
		        var lis = [];
		        for(var i = 0; i < 5; i++){
		        	var item='<a href="shop.html">'
							+'<div class="item">'
					  		+'<div class="item_top">'
					  	  	+'<div class="item_pic">'
					  	  	+'<img src="images/brand2/005.png">'
					  	  	+'<span>小甜甜甜品店（建国西路店）</span>'
					  	  	+'</div>'
					  	  	+'<div class="item_arrow">'
					  	  	+'<img src="images/arrows/arrow_r.png" />'
					  	  	
					  	  	+'</div>'
					 			+'</div>' 
					  		+'<div class="item_bot">'
					  		+'<div class="dp_pic">'
					  		+'<div class="dp_text">'
						  	+'<div class="dp_text_msg">店长说：唯甜点与爱不可辜负</div>'	
						  	+'</div>'
					  		+'</div>'
					  		+'</div>'
					  		+'</div>'
								+'</a>';
		          		lis.push(item)
		        	}
		        
		        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
		        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
		        next(lis.join(''), page < 5); //假设总页数为 10
						//next('列表HTML片段', page < res.pages); 
		      }, 500);
		      }
      });
    
  });

//<!--1.layui的引入，基础入门页面-->
//	<!--layui.use(['layer', 'form'], function(){
//	  var layer = layui.layer
//	  ,form = layui.form;
//	  
//	  layer.msg('Hello World');
//	});-->
//<!--结束-->
</script> 
<!--2.非模块化引入  不推荐-->

<!--<script src="build/lay/dest/layui.all.js"></script>-->

<!--<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
}();
</script> -->

</body>
</html>